<template>
    <div class="fast-nav">
        <div v-for="({file, name, url}, index) in myButtons" class="fast-nav-item">
            <a class="icon-link" @tap="openPage(url)">
                <img class="icon-img" :src="webApiDomain + '/public/uploads/' + file.savepath + file.savename">
                <div class="icon-title">{{name}}</div>
            </a>
        </div>
    </div>
</template>

<script>

import { apiDomain } from 'assets/js/Lib';

export default {
    data() {
        return {
            myButtons: [],
            isBig: false
        }
    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    watch: {
        buttons: function () {
            if (this.buttons.length > 0) this.myButtons = this.buttons
        }
    },
    components: {

    },
    props: {
        buttons: {
            type: Array,
            default: []
        }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {

    },
    //在挂载开始之前被调用
    beforeMount() {


    },
    //已成功挂载，相当ready()
    mounted() {
        // const vm = this;

        // let cache = localStorage.getItem('$ads-icons')

        // cache ? (cache = JSON.parse(cache)) : (cache = [])

        // if (cache.length > 0) this.myButtons = cache
    },
    //相关操作事件
    methods: {
        openPage: function (url) {
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }
            if (!url) {
                pageConfig.id = "building"
                pageConfig.url = "building.html"
            }

            mui.openWindow(pageConfig)
        }
    }
}
</script>

<style lang="less">
.fast-nav {
    width: 10rem;
    overflow: hidden;
    background-color: #fff;
    padding-top: .3rem;
    margin: 0 auto;
    .fast-nav-item {
        width: 20%;
        float: left;
        min-height: 1rem;
    }
}

.icon-link {
    text-align: center;
    text-decoration: none;
    display: block;
    color: #051B28;
    width: 100%;
    height: 100%;
    font-size: .32rem;

    .icon-img {
        height: 1.52rem;
        width: 1.52rem;
        display: block;
        margin: .1333333333rem auto;
        border-radius: 1.68rem;
    }

    .icon-title {
        font-size: .32rem;
        color: #333;
        line-height: .3466666667rem;
    }
}
</style>
